<template>
  <div>
    <van-nav-bar title="购物车" left-arrow @click-left="$router.back()" />
    <van-swipe-cell v-for="item in shopcarlist" :key="item.id">
      <template #left>
        <input type="checkbox" v-model="item.checked" @change="checkone">
      </template>
      <van-card
        :num="item.num"
        :price="item.price | toPrice"
        :title="item.goodsname"
        class="goods-card"
        :thumb="$imgUrl + item.img"
      >
        <template #footer>
          <van-stepper v-model="item.num" @plus="plus(item.id)" @minus="minus(item.id)" @change="changenum"/>
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="delcate(item.id)"
        />
      </template>
    </van-swipe-cell>
    <div class="footer">
      <!-- <van-submit-bar
        :price="countsprice"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="checkeds" @change="checkAll">全选</van-checkbox>
      </van-submit-bar> -->
     <div><input type="checkbox" name="" id="" @change="checkAll" v-model="checkeds"> <span>全选</span>  </div>
     <div>合计：{{countsprice}}元</div>
     <div>
       <p><button class="btn">提交订单</button></p>
     </div>
    </div>
    <v-nav></v-nav>
  </div>
</template>

<script>
import vNav from "./vNav";
import { Toast } from "vant";
import { Dialog } from "vant";
import { shopcarlist, getGoodsOne ,delshopcar,editshopcar} from "./util/axios";
export default {
  data() {
    return {
      checkeds: false,
      value: 1,
      countsprice:0,
      active: 0,
      shopcarlist: [],
      uid: "",
      nums:0
    };
  },
  mounted() {
    this.uid = sessionStorage.getItem("userInfo")
      ? JSON.parse(sessionStorage.getItem("userInfo")).uid
      : "";
       this.getlist();
  },
  methods: {
    onSubmit() {
         
    },
    delcate(id) {
      delshopcar({id}).then((res) => {
         if(res.code==200){
           Toast.success(res.msg)
         }
      });
      this.getlist();
    },
    getlist() {
      shopcarlist({ uid: this.uid }).then((res) => {
        if (res.code == 200) {
          let list = res.list ? res.list : [];
          list.forEach(item=> {
               item.checked = false
          });
          this.shopcarlist = list;
          // console.log(this.shopcarlist);
        }
      });
    },
    checkAll(){
     this.shopcarlist.forEach(item=>{
        item.checked = this.checkeds 
      })
              let num = 0;
       this.shopcarlist.forEach(item=>{
         if(item.checked){
              num+=item.num * item.price
         }
       })
         this.countsprice = num; 
    },
    plus(id){
       editshopcar({id:id,type:2}).then(res=>{
             if(res.code == 200){
                //  Toast.success(res.msg)
             }
       })
    },
    minus(id){
          editshopcar({id:id,type:1}).then(res=>{
             if(res.code == 200){
                //  Toast.success(res.msg)
             }
       })
    },
    changenum(e){
      this.nums = e;
        let num = 0;
       this.shopcarlist.forEach(item=>{
         if(item.checked){
              num+=item.num * item.price
         }
       })
         this.countsprice = num; 
    },
    checkone(){
      
     this.checkeds  = this.shopcarlist.every(item=>{
              //  console.log(item.checked);
              return item.checked == true
     })
         let num = 0;
       this.shopcarlist.forEach(item=>{
         if(item.checked){
              num+=item.num * item.price
         }
       })
         this.countsprice = num;
         console.log( this.countsprice);
    //  console.log(this.checkeds);
    }
  },
  components: {
    vNav,
  },

  beforeRouteEnter(to, from, next) {
    //   console.log("进入组件前");
    // console.log(sessionStorage.getItem("userInfo"));
    // return
    // console.log((sessionStorage.getItem("userInfo") == null));
    if (sessionStorage.getItem("userInfo")) {
      next();
    } else {
      Dialog.confirm({
        title: "请登录",
        message: "检查到您还没有登录，请先登录",
      })
        .then(() => {
          next("/login");
        })
        .catch(() => {
          next(false);
        });
    }
  },
};
</script>

<style scoped>
.delete-button {
  height: 100%;
}
.van-swipe-cell {
  width: 100%;
}
.footer{
  position: fixed;
  bottom: 0.79rem;
  padding: 0 0.2rem;
  /* width: 100%; */
  width: 7.1rem;
  height: 0.8rem;
  line-height: 0.8rem;
  /* background-color: skyblue; */
  vertical-align: baseline;
  font-size:0.3rem;
  display: flex;
  justify-content: space-between;

}
.btn{
  background-color: #666;
  color:#fff;
  height: 0.5rem;
  line-height: 0.5rem;
  /* padding: 0.1rem ; */
  font-size: 0.2rem;
  outline: none;
  border: none;
}
</style>